<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        {{ $t('route.historySession') }}
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            :pageMethod="getPageData"
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button class="icon-button setting-button" type="primary" style="width: auto;" @click="batchDelete(tableSlotData.table.selectRows)" :disabled="tableSlotData.table.data.length <= 0">
                  <i class="iconfont iconzhongyiicon_shanchu" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('historySessionManage.clearSession') }}</span>
                </el-button>
              </div>
              <div class="table-right-options">
              </div>
            </template>
            <template #table-column="tableSlotData">
              <!-- <el-table-column type="selection" width="40" align="center"></el-table-column> -->
              <el-table-column
                prop="cloud_tenant_name"
                v-if="authrole && authrole === 'system_admin'"
                :label="$t('common.tenant')">
              </el-table-column>
              <el-table-column
                prop="user_name"
                :label="$t('route.user')">
              </el-table-column>
              <el-table-column
                prop="desktop_client_name"
                :label="$t('currentSessionManage.client')">
              </el-table-column>
              <el-table-column
                prop="desktop_name"
                :label="$t('currentSessionManage.desktop')">
              </el-table-column>
              <el-table-column
                prop="agreement"
                :label="$t('currentSessionManage.agreement')">
                Blast
              </el-table-column>
              <el-table-column
                prop="connected_at"
                :label="$t('currentSessionManage.connectionTime')">
                <template slot-scope="scope">
                  {{ myParseTime(new Date(scope.row.connected_at)) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="time"
                :label="$t('currentSessionManage.connectionDuration')">
                <template slot-scope="scope">
                  {{ myFormatSeconds((new Date(scope.row.disconnected_at) - new Date(scope.row.connected_at)) / 1000) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="disconnect_reason"
                :label="$t('historySessionManage.disconnectionCause')">
                <template slot-scope="scope">
                  {{ $t('historySessionManage.disconnectReasons.' + scope.row.disconnect_reason) }}
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <!-- 清空会话 -->
              <clear-session ref="clearSession" :clear-method="() => $eagleApi.apiDeleteHistorySessions().then(() => {
                tableSlotData.table.deleteRefresh();})">
              </clear-session>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../../components/Basic/Table/BasicTable.vue';
import { parseTime, formatSeconds } from "../../../utils/index"
import clearSession from './clear_session.vue';
import { AuthModule } from '../../../store/modules/auth';
export default Vue.extend({
  components: {
    BasicTable,
    clearSession
  },
  computed: {
    AuthModule: () => AuthModule
  },
  data() {
    return {
      tableData:[],
      tenantSelectLoading: false,
      searchTenantId: '',
      tenantList: [],
      searchValue: '',
      authrole: AuthModule.authrole
    }
  },
  mounted() {
    // console.log(this.authrole);
    // (this as any).$tunnyApi.apiGetTenantList().then((res: any)=>{
    //   (this as any).tenantList = res;
    // })
  },
  methods: {
    async getTenantNameById(id: string) {
      const result = await (this as any).$tunnyApi.apiGetTenantById(id);
      return result.name;
    },
    async getPageData(params: any) {
      params.search = this.searchValue;
      params.cloud_tenant_id = AuthModule.authrole === 'tenant_admin' ? AuthModule.cloud_tenant_id : this.searchTenantId;
      const res = await this.$eagleApi.apiGetHistorySessions(params);
      for (let index = 0; index < res.rows.length; index++) {
        const row = res.rows[index];
        if (AuthModule.authrole === 'system_admin') {
          const name = await this.getTenantNameById(row.cloud_tenant_id).then((name: string) => res.rows[index].tenantName = name);
          res.rows[index].cloud_tenant_name = name;
        }
      }
      return res;
    },
    myParseTime(s: any) {
      return parseTime(s);
    },

    myFormatSeconds(s: any) {
      return formatSeconds(s);
    },

    initTenantName(id: any) {
      for(let i in (this as any).tenantList) {
        if (id === (this as any).tenantList[i].id) {
          return (this as any).tenantList[i].name
        }
      }
      return ;
    },

    // 清空会话
    batchDelete(selectRows: any) {
      let param: any = []
      selectRows.map((k: any) => {
        param.push(k.desktop_client_id)
      });
      (this as any).$refs.clearSession.init({
        title: (this as any).$t('historySessionManage.clearSession'),
        tip: (this as any).$t('historySessionManage.sureClearSession'),
        sessionList: param
      });
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
